<template>
  <div class="test">
    <test-header></test-header>
    <Answer :list="shuffle()"></Answer>
  </div>
</template>

<script>
import { json } from "../../data/json.js";
import Answer from "../../components/Answer/Answer.vue";
import TestHeader from "../../components/Answer/Test-Header.vue";
import { order } from "../../Tools/index";
import { reactive, ref, toRefs } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
export default {
  name: "Test",
  components: {
    Answer,
    TestHeader,
  },
  setup() {
    const list = json;
    console.log(list, "order");
    const show = ref(true);
    onMounted(() => {
      localStorage.removeItem("user-true");
      localStorage.removeItem("user-false");
      shuffle();
    });
    const shuffle = () => {
      let single = []; // 单选
      let multiple = []; // 多选
      list.forEach((item) => {
        if (item.type === 2) {
          // 多选
          multiple.push(item);
        } else if (item.type === 1) {
          // 单选
          single.push(item);
        }
      });
      return [...order(single).slice(0, 20), ...order(multiple).slice(0, 10)];
    };
    return {
      list,
      shuffle,
      show,
    };
  },
};
</script>
<style lang="scss" scope>
.test {
  width: 100%;
  height: 100%;
  background-color: #4e82e7;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  // .dialog {
  //   width: 95%;
  //   height: 80%;
  //   background: #fff;
  //   box-shadow: 1px 1px 1px 1px #ccc;
  //   position: absolute;
  //   border-radius: 0.5rem;
  //   padding: 0.2rem;
  //   top: 50%;
  //   left: 50%;
  //   transform: translate(-50%, -50%);
  // }
}
</style>
